// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Choice fields (radio buttons and checkboxes) styles


// Unselected, radio button (default)
.ms-ChoiceField {
	.ms-font-m;
	.ms-u-normalize;
	min-height: 36px;
	position: relative;

	.ms-Label {
		font-size: @ms-font-size-m;
		padding: 0 0 0 26px;
	}
}

//== State: Disabled choicefield
.ms-ChoiceField-input:disabled {
	+ .ms-ChoiceField-field {
		pointer-events: none;
		cursor: default;

		&:before {
			background-color: @ms-color-neutralTertiaryAlt;
			color: @ms-color-neutralTertiaryAlt;
		}

		&:after {
			border-color: @ms-color-neutralLight;
		}

		.ms-Label {
			color: @ms-color-neutralTertiary;
		}
	}
}

// The original unstyled input element
.ms-ChoiceField-input { 
	position: absolute;
	opacity: 0;
	top: 8px;

	&:focus:not(:disabled) {
		+ .ms-ChoiceField-field:after {
			border-color: @ms-color-neutralSecondaryAlt;
		}
	}
}

// The choicefield radio button or checkbox
.ms-ChoiceField-field {
	display: inline-block;
	cursor: pointer;
	margin-top: 8px;
	position: relative;

	// The actual styled choicefield element - radio button by default
	&:after {
		content: '';
		display: inline-block;
		border: 1px @ms-color-neutralTertiaryAlt solid;
		width: 19px;
		height: 19px;
		cursor: pointer;
		position: relative;
		font-weight: normal;
		left: -1px;
		top: -1px;
		border-radius: 50%;
		position: absolute;			
	}

	&:hover {
		&:after {
			border-color: @ms-color-neutralSecondaryAlt;
		}

		.ms-Label {
			color: @ms-color-black;
		}
	}
}

// A selected radio button
.ms-ChoiceField-input:checked {
	+ .ms-ChoiceField-field {
		// Circle indicating a checked radio button
		&:before {
			background-color: @ms-color-neutralSecondary;
			border-color: @ms-color-neutralSecondary;
			color: @ms-color-neutralSecondary;
			border-radius: 50%;
			content: '\00a0';
			display: inline-block;
			position: absolute;
			top: 4px;
			right: 0;
			bottom: 0;
			left: 4px;
			width: 11px;
			height: 11px;
			box-sizing: border-box;
		}

		&:hover:before {
			background-color: @ms-color-neutralDark;
			color: @ms-color-neutralDark;
		}
	}
}

// Checkbox
.ms-ChoiceField-input[type="checkbox"] {
	+ .ms-ChoiceField-field:after {
		border-radius: 0;
	}
}

// A selected checkbox 
.ms-ChoiceField-input[type="checkbox"]:checked {
	+ .ms-ChoiceField-field {
		&:before {
			.ms-Icon;
			content: '\e041';
			background-color: transparent;
			border-radius: 0;
			font-size: @ms-font-size-s-plus;
			top: 3px;
			left: 3px;
		}
	}
}


//== Component: Choicefield group
//
// Choice field groups contain multiple radio buttons or checkboxes
.ms-ChoiceFieldGroup {
	margin-bottom: 4px;
}
